<template>
  <div class="bgBox">
    <div class="addMain">
      <el-page-header @back="()=>{this.$router.go(-1)}" content="事务操作"></el-page-header>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-divider></el-divider>
        <el-form-item label="事件名称" prop="name">
          <el-input v-model="form.name" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="name">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.start" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束日期" prop="name">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.end" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="发起人" prop="name">
          <el-input v-model="form.order" maxlength="6" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="经办人">
          <el-input v-model="form.dos" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input type="textarea" v-model="form.other" rows="10"></el-input>
        </el-form-item>
        <el-form-item label="名单">
          <el-input type="textarea" v-model="form.nameList" rows="10"></el-input>
        </el-form-item>
        <el-form-item label="文件附录">
          <el-card class="box-card" v-if="form.files.length==0">
            当前没有文件
          </el-card>
        </el-form-item>

        <el-card class="box-card" v-for="(item,index) in form.files" :key="index">
          <span>{{item.name}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="removeFile(index)">移除</el-button>
        </el-card>

        <br>
        <el-tabs type="border-card">
          <el-tab-pane label="选择附录文件">
            <myfile v-on:pushFile="pushFile" fileTpye="select"></myfile>
          </el-tab-pane>
        </el-tabs>



        <br>
        <span v-if="type=='add'">
          <el-checkbox v-model="form.guanq">创建官Q任务</el-checkbox>
          <el-checkbox v-model="form.news">创建新闻稿任务</el-checkbox>
        </span>
        <el-form-item>
          <el-button type="primary" @click="createWork" v-if="type=='add'">立即创建</el-button>
          <el-button type="primary" @click="saveWork" v-if="type=='change'">保存更改</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import token from "../../api/token.js"
  import myfile from "../file/myfile.vue"
  import user from "../../api/user.js"
  import workApi from "../../api/work.js"
  import fileApi from "../../api/file.js"
  export default {
    data() {
      return {
        type: "add",
        form: {
          name: '',
          start: '',
          end: '',
          files: [],
          fileids: [],
          other: '',
          order: '',
          dos: '',
          nameList: "",
          guanq: false,
          news: false
        },
        rules: {
          name: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }]
        }
      }
    },
    components: {
      myfile
    },
    methods: {
      createWork() {
        let {
          name,
          start,
          end,
          fileids,
          other,
          order,
          dos,
          guanq,
          news,
          nameList
        } = this.form
        if (name == "" || start == "" || end == "" || order == "") {
          this.$message.error('请完整填写');
          return
        }
        let body = {
          name,
          start: token.formatDate(start),
          end: token.formatDate(end),
          fileid: fileids.toString(),
          other,
          order,
          dos,
          fromid: user.getMyInfo().id,
          guanq: guanq ? 1 : 0,
          news: news ? 1 : 0,
          nameList,
        }
        workApi.addWork(body).then((res) => {
          if (res.code == 1) {
            // console.log(res)
            this.$router.push(`/work/paper?id=${res.data[0][0].id}`)
          }
        })
      },
      urlify(text) {
        const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return text.replace(urlRegex, (url) => {
          return `<a href="${url}">${url}</a>`;
        })
      },
      saveWork() {
        let {
          name,
          start,
          end,
          fileids,
          other,
          order,
          dos,
          nameList,
        } = this.form
        if (name == "" || start == "" || end == "" || order == "") {
          this.$message.error('请完整填写');
          return
        }

        let body = {
          name,
          start: token.formatDate(start),
          end: token.formatDate(end),
          fileid: fileids.toString(),
          other,
          order,
          dos,
          nameList,
          id: this.$route.query.id,
          // fromid: user.getMyInfo().id,

        }
        workApi.saveWork(body).then((res) => {
          if (res.code == 1) {
            this.$notify.success({
              title: '成功',
              message: '保存成功'
            });
            this.$router.push(`/work/paper?id=${this.$route.query.id}`)
          }
        })
      },
      pushFile(name, id) {
        this.form.files.push({
          name,
          id
        })
        this.form.fileids.push(id)
      },
      removeFile(index) {
        this.form.files.splice(index, 1)
        this.form.fileids.splice(index, 1)
      },
      back() {
        this.$router.go(-1)
      }
    },
    created() {
      let id = this.$route.query.id
      if (this.$route.query.id) {
        this.type = "change"
        workApi.getPaper(id).then((res) => {
          if (res.code == -3) {
            this.$notify.error({
              title: '错误',
              message: '无此权限'
            });
            this.type = "error"
          }

          for (let i in res.data[0]) {
            this.form[i] = res.data[0][i]
          }
          for (let file of res.data[0].fileid.split(",")) {
            fileApi.getFile(file).then((res) => {
              this.pushFile(res.data[0].name, file)
            })

          }
        })

      }
    }
  }
</script>

<style scoped>
  .addMain {
    width: 80%;
    margin-left: 10%;
    margin-top: 15px;
  }

  .bgBox {
    background: url(https://pic.imgdb.cn/item/61f2a9742ab3f51d91f9b810.png) right bottom / 50% no-repeat;
    background-attachment: fixed;
  }
</style>
